<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>缤格</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/binge.css" />
    <!-- 引入jQuery -->
    <script src="../../script/edit/jquery.min.js"></script>


    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
    <style type="text/css">
        body {
            -webkit-touch-callout: none;
            background-color: #fff;
            line-height: inherit;
        }
    </style>
</head>
<body>

<script>
    var ua = navigator.userAgent.toLowerCase();
    ;

    if (ua.indexOf('android') >= 0 || ua.indexOf('iphone') >= 0 || ua.indexOf('ipad') >= 0 || $(window).width() <= 500) {
        $('.viewTit').hide();
        $('body').css('padding-top', 0);
    }
</script>
<!-- header -->
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <div class="header">
        <div class="head-back">
            <a href="javascript:void(0);" tapmode onclick="comeBack()" class="back-btn"></a>
        </div>
        <div class="head-title">
            <h6>发布帖子</h6>
        </div>
        <!--<div class="head-action">-->
        <!--<a href="javascript:void(0);" tapmode onclick="openModel()" class="action-btn"></a>-->
        <!--</div>-->
    </div>
</div>
<!-- header end -->
<div class="header-h" style="padding-top: 1.5rem;"></div>
<div class="invitation-title">
    <input type="text" maxlength="40" id="title" placeholder="请输入帖子主题名称(20字内)">
</div>
<div class="invitation-video">
    <div class="upload_video">
        <span tapmode onclick="showVideo()" class="uploadVideo">上传视频</span>
        <span tapmode onclick="deleteVideo()" class="deleteVideo" style="display: none;">删除该视频</span>
    </div>
    <div class="video-box detail-video zy_media" id="videoBox">
        <!--<video id="video" data-vid="3275" data-pid="3276" poster="http://www.urbubble.com/static/uploads/2019-12-12/min6d60b7b987e40272c77e71a6d5ddf297.png"> <source src="http://www.urbubble.com/static/uploads_file//20191212/4c07d3f83dd3bc8804515a3250f20f63.mp4" type="video/mp4"> </video><span class="player-icon" id="video_player"></span>-->

    </div>
</div>

<div id="contentEditor"></div>

<div class="common-fixed-bottom">
    <a href="javascript:void(0);" class="fixed-bottom" tapmode onclick="submitInvitation()">发布</a>
</div>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/zy.media.min.css"/>
<script type="text/javascript" src="../../script/zy.media.min.js"></script>
<!-- 如果需要图片上传 -->
<script src="../../script/edit/webuploader.min.js"></script>
<!-- 插件核心 -->
<script src="../../script/edit/Eleditor.min.js"></script>
<script type="text/javascript">
    var circle_id = '';//圈子id
    var rSwitch = true;
    apiready = function() {

        setFixStatusBar(); //设置状态栏
        circle_id = api.pageParam.circle_id;
        // circle_id = 2

    };

    function submitInvitation() {
        if(rSwitch){
            var content = $('#contentEditor').html();
            var icons = '';
            $('#contentEditor img').each(function () {
                var _this = $(this);
                var _this_id = _this.attr('data-id');
                if(icons == ''){
                    icons = _this_id
                }else {
                    icons += ','+_this_id
                }
            });

            var void_id = '';
            if(isDefine($('.play_video').attr('data-vid'))){
                void_id = $('.play_video').attr('data-vid')
            }
            var void_icon = '';
            if(isDefine($('.play_video').attr('data-pid'))){
                void_icon = $('.play_video').attr('data-pid')
            }

            var param = {
                token: $api.getStorage('token'),
                circle_id: circle_id,
                title: $("#title").val(),
                content: content,
                icons: icons,
                void_id: void_id,
                void_icon: void_icon,
            }
            if (!isDefine(param.title)) {
                pop.notice('请输入帖子主题名称');
                return;
            }else if(param.content == '<p class=\"Eleditor-placeholder\">点击此处编辑内容</p>' || param.content == '<p class=\"Eleditor-placeholder Eleditor-active\">点击此处编辑内容</p>'){
                pop.notice('请输入帖子内容');
                return;
            }
            pop.loading();
            getAjax(Interface.set_invitation,param,function (res) {
                pop.notice('发布成功');
                rSwitch = false;
                setTimeout(function () {
                    comeBack();
                    api.sendEvent({
                        name: 'set_invitation',
                        extra: {}
                    });
                    api.sendEvent({
                        name: 'memberInfo',
                        extra: {}
                    });
                },1000)
                pop.close();
            },function (error) {
                pop.notice(error.msg)
                pop.close();
            })
        }

    }



    var contentEditor = new Eleditor({
        el: '#contentEditor',
        upload: {
            server: ajaxUrl+Interface.upload_img,
            formData: {
                'token': '123123'
            },
            compress: false,
            fileSizeLimit: 10,
            formName: 'file',//设置文件name,
            accept: {//accept一般不用设置
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png,webp',
                mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,image/webp'
            }
        },
        /*初始化完成钩子*/
        mounted: function () {

            /*以下是扩展插入视频的演示*/
            var _videoUploader = WebUploader.create({
                auto: true,
                server: ajaxUrl+Interface.upload_file,//服务器地址
                /*按钮类就是[Eleditor-你的自定义按钮id]*/
                pick: $('.Eleditor-insertVideo'),
                duplicate: true,
                resize: false,
                accept: {
                    title: 'Images',
                    extensions: 'mp4',
                    mimeTypes: 'video/mp4'
                },
                fileVal: 'video',
            });
            _videoUploader.on('uploadSuccess', function (_file, _call) {

                if (_call.status == 200) {
                    return window.alert(_call.msg);
                }

                /*保存状态，以便撤销*/
                contentEditor.saveState();
                contentEditor.getEditNode().after(`
									<div class='Eleditor-video-area'>
										<video src="${_call.path}" controls="controls"></video>
									</div>
								`);
                contentEditor.hideEditorControllerLayer();
            });
        },
        changer: function () {
            console.log('文档修改');
        },
        /*自定义按钮的例子*/
        toolbars: [
            'insertText',
            'editText',
            'insertImage',
            'insertLink',
            'insertHr',
            'delete',
            //自定义一个视频按钮
            /*{
                id: 'insertVideo',
                // tag: 'p,img', //指定P标签操作，可不填
                name: '插入视频',
                handle: function (select, controll) {//回调返回选择的dom对象和控制按钮对象

                    /!*因为上传要提前绑定按钮到webuploader，所以这里不做上传逻辑，写在mounted*!/

                    /!*!!!!!!返回false编辑面板不会关掉*!/
                    return false;
                }
            },*/
            'undo',
            'cancel'
        ]
        //placeHolder: 'placeHolder设置占位符'
    });


    //视频上传
    function showVideo() {

        api.actionSheet({
            title: '上传视频',
            cancelTitle: '取消',
            buttons: ['选择视频', '拍摄视频']
        }, function (ret, err) {
            if (ret) {
                getVideo(ret.buttonIndex);
            }
        });
    }

    function getVideo(sourceType) {
        if (sourceType == 1) { // 从相机中选择
            var ISphoen = api.systemType;
            var UIAlbumBrowser = api.require('UIAlbumBrowser');
            UIAlbumBrowser.open({
                max: 1,
                type: 'video',
                isOpenPreview: false,
                classify: false,
                styles: {
                    bg: '#fff',
                    mark: {
                        icon: '',
                        position: 'bottom_left',
                        size: 20
                    },
                    nav: {
                        bg: 'rgba(0,0,0,0.6)',
                        titleColor: '#fff',
                        titleSize: 18,
                        cancelColor: '#fff',
                        cancelSize: 16,
                        finishColor: '#fff',
                        finishSize: 16
                    }
                },
                rotation: true
            }, function (ret) {
                // alert(JSON.stringify(ret));
                if (ret.eventType == "cancel") {
                    pop.notice("取消了操作！")
                    return;
                }
                var dt = ret.list;

                api.showProgress({
                    title: '正在上传...',
                    modal: true
                });
                if (ret) {
                    if (ISphoen == "ios") {
                        // for (var i in dt) {

                        UIAlbumBrowser.transPath({
                            path: ret.list[0].path
                        }, function (ret, err) {
                            if (ret) {
                                // alert(JSON.stringify(ret));
                                console.log(ret.path)
                                var ListVideoSec = ret.path;
                                api.ajax({
                                    url: ajaxUrl + Interface.upload_file,
                                    method: 'post',
                                    data: {
                                        files: {
                                            'file': ret.path,
                                        }
                                    }
                                }, function (ret, err) {
                                    console.log(JSON.stringify(ret))
                                    if (ret) {

                                        if (ret.code == 200) {
                                            //arrimg.push(ret)
                                            api.hideProgress();
                                            addVideos(ret.icon, ajaxUrl + ret.path, ListVideoSec);
                                        } else {
                                            api.hideProgress();
                                            api.toast({
                                                msg: ret.msg,
                                                location: 'middle'
                                            });
                                        }
                                    } else {

                                        api.hideProgress();
                                        api.toast({
                                            msg: err.msg,
                                            location: 'middle'
                                        });
                                    }
                                });
                            }
                        });
                        // }
                    } else {
                        var ListVideoSec = ret.list[0].path;
                        // for (var i in dt) {
                        api.ajax({
                            url: ajaxUrl + Interface.upload_file,
                            method: 'post',
                            data: {
                                files: {
                                    'file': ret.list[0].path,
                                }
                            }
                        }, function (ret, err) {
                            console.log(JSON.stringify(ret))
                            if (ret) {

                                if (ret.code == 200) {
                                    //arrimg.push(ret)
                                    api.hideProgress();
                                    addVideos(ret.icon, ajaxUrl + ret.path, ListVideoSec);
                                } else {
                                    api.hideProgress();
                                    api.toast({
                                        msg: ret.msg,
                                        location: 'middle'
                                    });
                                }
                            } else {
                                api.hideProgress();
                                api.toast({
                                    msg: err.msg,
                                    location: 'middle'
                                });
                            }
                        });


                        // }
                    }
                }
            });

        } else if (sourceType == 2) {
            //拍摄视频
            api.getPicture({
                sourceType: 'camera',
                encodingType: 'png',
                mediaValue: 'video',
                allowEdit: false,
                videoQuality: 'high',
                destinationType: 'url',
                saveToPhotoAlbum: true
            }, function (ret, err) {
                var ISphoen = api.systemType;
                if (ISphoen == "ios") {
                    if (ret == '') {
                        return;
                    }
                } else {
                    if (ret.data == '') {
                        return;
                    }
                }
                if (ret) {

                    var imgSrc = ret.data;
                    if (imgSrc != "") {

                        //$api.attr(ele, 'src', imgSrc);
                    }
                    api.showProgress({
                        title: '正在上传...',
                        modal: true
                    });
                    // api.hideProgress();
                    var ele = $api.dom('#paishe');
                    api.ajax({
                        url: ajaxUrl + Interface.upload_file,
                        method: 'post',
                        data: {
                            files: {
                                'file': ret.data,
                            }
                        }
                    }, function (ret, err) {
                        //  alert(JSON.stringify(ret));
                        if (ret) {
                            if (ret.code == 200) {

                                api.hideProgress();
                                addVideos(ret.icon, ajaxUrl + ret.path, imgSrc);

                            } else {
                                api.hideProgress();
                                api.toast({
                                    msg: ret.msg,
                                    location: 'middle'
                                });
                            }
                        } else {

                            api.hideProgress();
                            api.toast({
                                msg: err.msg,
                                location: 'middle'
                            });
                        }
                    });


                }
            });
        }
    }

    function addVideos(id, videoPath, bdvideopath) {

        var videoScreenshots = api.require('videoScreenshots');
        var timestamp = new Date().getTime();
        videoScreenshots.screenshots({
            videoUrl: bdvideopath,//视频url
            time: 1,
            name: timestamp
        }, function (ret) {
            if (ret.status == true) {
                console.log(JSON.stringify(ret));
                var video_id = id;//上传之后的视频id
                var video_path = videoPath;//本地视频路径

                // console.log(video_id)
                // console.log(videoPath)
                setvideoSrc(ret.path,video_id,video_path,bdvideopath)
            }
        });
    }
    var videoUrl = '';
    $(document).on('click', '#video_player', function () {
        play(videoUrl)
    })
    //上传视频封面
    function setvideoSrc(videoimg,video_id,video_path,bdvideopath) {
        uploadImg(videoimg,function (res) {
            // console.log(jsonChange(res))
            videoUrl = bdvideopath;
            $('#videoBox').html('<video src="'+bdvideopath+'" poster="'+ajaxUrl+res.path+'"></video>')

            checkSystemType(function () {
                //ios
                $('#videoBox').html('<video class="play_video" id="play_video" data-vid="'+video_id+'" data-pid="'+res.icon+'" style="width: 100%;" src="' + bdvideopath + '" poster="' + ajaxUrl + res.path + '"></video><span class="player-icon" id="video_player"></span>')
                videoUrl = bdvideopath

            },function () {
                //android
                var videoHtml = '<video id="video" class="play_video" data-vid="'+video_id+'" data-pid="'+res.icon+'" poster="'+ ajaxUrl + res.path +'">' +
                    '                <source src="'+ bdvideopath +'" type="video/mp4" />' +
                    '            </video>'
                $('#videoBox').html(videoHtml);
                console.log($('#videoBox').html())
                doZyMediaJs(1)

            });
            // console.log($('#videoBox').html())

            $(".deleteVideo").show();
            $(".uploadVideo").html('重新上传')

        })
    }

    //删除视频
    function deleteVideo(){
        $('#videoBox').html('').css({height: 'auto'})
        $(".deleteVideo").hide();
        $(".uploadVideo").html('上传视频')
    }






</script>

</body>
</html>